<template>
  <div>
    <el-form label-position="top" v-model="formData">
      <!-- 参培人员 -->
      <el-form-item label="参培人员">
        <div style="text-align: justify">
          <el-dropdown
            v-for="(item, index) in formData.clientNames"
            :key="index"
            trigger="click"
            @command="handleRemoveClient(index)"
          >
            <el-button size="small" round style="margin-right: 6px">
              {{ item }}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="del"
                >删除 <strong>{{ item }}</strong></el-dropdown-item
              ></el-dropdown-menu
            >
          </el-dropdown>
          <el-button
            type="primary"
            size="small"
            plain
            circle
            icon="el-icon-plus"
            @click="openAddClientDailog"
          ></el-button>
        </div>
      </el-form-item>
      <!-- 培训科目 -->
      <el-form-item label="培训科目">
        <el-select
          v-model="formData.subject"
          filterable
          allow-create
          placeholder="请在列表中选择或自行输入"
          style="width: 100%"
        >
          <el-option
            v-for="item in subjectList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 练习名称 -->
      <el-form-item label="练习名称">
        <el-select
          v-model="formData.exercise"
          filterable
          allow-create
          placeholder="请在列表中选择或自行输入"
          style="width: 100%"
        >
          <el-option
            v-for="item in exerciseList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 练习时长（分钟） -->
      <el-form-item label="练习时长（分钟）">
        <el-slider
          v-model="formData.hours"
          :step="30"
          :show-tooltip="false"
          show-stops
          show-input
          :min="0"
          :max="120"
        >
        </el-slider>
      </el-form-item>
      <!-- 练习内容 -->
      <el-form-item label="练习内容">
        <div style="text-align: justify">
          <el-dropdown
            v-for="(item, index) in formData.itemTitles"
            :key="index"
            trigger="click"
            @command="handleRemoveItem(index)"
          >
            <el-button size="small" round style="margin-right: 6px">
              {{ item }}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="del"
                >删除 <strong>{{ item }}</strong></el-dropdown-item
              ></el-dropdown-menu
            >
          </el-dropdown>
          <el-button
            type="primary"
            size="small"
            plain
            circle
            icon="el-icon-plus"
            @click="openAddItemDailog"
          ></el-button>
        </div>
      </el-form-item>
      <!-- 所属月份 -->
      <el-form-item label="所属月份">
        <el-date-picker
          v-model="formData.month"
          type="month"
          :clearable="false"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 培训日期 -->
      <el-form-item label="培训日期">
        <el-date-picker
          v-model="formData.time"
          :clearable="false"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div style="display: flex; justify-content: center">
      <el-button :type="dataVerify ? 'primary' : 'info'">下一步</el-button>
    </div>
    <!-- Client Tree -->
    <el-dialog
      title="选择参培人员"
      :visible.sync="visible.addClient"
      :width="modelViewSize.width + 'px'"
    >
      <div
        :style="{
          maxHeight: '40vh',
          overflowY: 'auto',
          overflowX: 'hidden',
        }"
      >
        <el-tree
          ref="clientTree"
          :data="clientListStatic"
          show-checkbox
          node-key="value"
          :default-expanded-keys="['管制二室']"
          @check-change="handleClientTreeCheck"
          @node-click="handleClientTreeClick"
          :default-checked-keys="formData.clientNames"
        >
        </el-tree>
      </div>
      <el-divider></el-divider>
      <el-alert
        :type="formData.clientNames.length > 0 ? 'success' : 'warning'"
        :closable="false"
        show-icon
      >
        <template slot="title"
          >已选人员 ({{ formData.clientNames.length }})</template
        >
        {{
          formData.clientNames.length > 0
            ? formData.clientNames.join(", ")
            : "请在列表中勾选参加复训的人员"
        }}
      </el-alert>
    </el-dialog>
    <!-- Item Tree -->
    <el-dialog
      title="选择练习包含的内容"
      :visible.sync="visible.addItem"
      :width="modelViewSize.width + 'px'"
    >
      <div
        :style="{
          maxHeight: '40vh',
          overflowY: 'auto',
          overflowX: 'hidden',
        }"
      >
        <el-tree
          ref="itemTree"
          :data="itemList"
          show-checkbox
          node-key="value"
          default-expand-all
          @check-change="handleItemTreeCheck"
          @node-click="handleItemTreeClick"
          :default-checked-keys="formData.itemTitles"
        >
        </el-tree>
      </div>
      <el-divider></el-divider>
      <el-alert
        :type="formData.itemTitles.length > 0 ? 'success' : 'warning'"
        :closable="false"
        show-icon
      >
        <template slot="title"
          >已选项目 ({{ formData.itemTitles.length }})</template
        >
        {{
          formData.itemTitles.length > 0
            ? formData.itemTitles.join(", ")
            : "请在列表中勾选练习包含的内容"
        }}
      </el-alert>
    </el-dialog>
  </div>
</template>

<script>
import itemList from "./itemList.json";
import { mapState } from "vuex";
export default {
  data() {
    return {
      visible: {
        addClient: false,
        addItem: false,
      },
      formData: {
        clients: [],
        clientNames: [],
        subject: "",
        exercise: "",
        items: [],
        itemTitles: [],
        month: "",
        time: "",
        hours: 60,
      },
      subjectList: [],
      exerciseList: [],
      clientListStatic: [],
    };
  },
  computed: {
    ...mapState({
      clientList: (state) => state.clientData.clientCascaderLite,
      clientData: (state) => state.clientData.clientList,
      bodySize: (state) => state.view.body.size,
    }),
    itemList() {
      return itemList;
    },
    modelViewSize() {
      let width = 360;
      if (this.bodySize.width < width) width = this.bodySize.width;
      let height = this.bodySize.height - 50;
      return { width, height };
    },
    dataVerify() {
      if (this.formData.clients.length === 0) return false;
      if (this.formData.items.length === 0) return false;
      if (this.formData.subject.length === 0) return false;
      if (this.formData.exercise.length === 0) return false;
      if (this.formData.hours < 30) return false;
      return true;
    },
  },
  methods: {
    openAddClientDailog() {
      this.clientListStatic = JSON.parse(JSON.stringify(this.clientList));
      this.visible.addClient = true;
    },
    openAddItemDailog() {
      this.visible.addItem = true;
    },
    handleRemoveItem(index) {
      console.log(index);
      this.formData.items.splice(index, 1);
      this.formData.itemTitles.splice(index, 1);
    },
    handleRemoveClient(index) {
      console.log(index);
      this.formData.clients.splice(index, 1);
      this.formData.clientNames.splice(index, 1);
    },
    handleClientTreeClick(data) {
      console.log(data);
      if (!data.children) {
        this.$refs.clientTree.setChecked(
          data.value,
          this.$refs.clientTree.getCheckedKeys().indexOf(data.value) > -1
            ? false
            : true
        );
      }
    },
    handleClientTreeCheck() {
      let state = this.$refs.clientTree.getCheckedNodes();
      let a = [];
      let b = [];
      for (let i = 0; i < state.length; i++) {
        if (!state[i].children) {
          a.push(state[i].value);
          b.push(state[i]);
        }
      }
      console.log(JSON.stringify(a));
      console.log(JSON.stringify(b));
      this.formData.clients = b;
      this.formData.clientNames = a;
    },

    handleItemTreeClick(data) {
      console.log(data);
      if (!data.children) {
        this.$refs.itemTree.setChecked(
          data.value,
          this.$refs.itemTree.getCheckedKeys().indexOf(data.value) > -1
            ? false
            : true
        );
      }
    },
    handleItemTreeCheck() {
      let state = this.$refs.itemTree.getCheckedNodes();
      let a = [];
      let b = [];
      for (let i = 0; i < state.length; i++) {
        if (!state[i].children) {
          a.push(state[i].value);
          b.push(state[i]);
        }
      }
      console.log(JSON.stringify(a));
      console.log(JSON.stringify(b));
      this.formData.items = b;
      this.formData.itemTitles = a;
    },
  },
  mounted() {
    this.formData.month = new Date();
    this.formData.time = new Date();
    console.log(itemList);
  },
};
</script>